<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="resources/js/jquery/jquery-1.10.2.js"></script>
	<script src="resources/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="resources/css/style.css"></link>
	<link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	
	<script type="text/javascript">
		var jq = jQuery.noConflict();
		var arr = [];
		var MAX_NESTING_LEVEL = <%= com.sav.common.controller.Consts.MAX_NESTING_LEVEL %>;
		var level = ${level};
	</script>
</head>
<body>
	<div id="container">
	
	<jsp:include page="menubar.jsp"></jsp:include>
		
		
	<jsp:include page="right_sidebar.jsp"></jsp:include>
		
	<div id="content" style="width: 72%; margin-left: 5%">
		<center><h1>${nameParentCategory}</h1></center>
		<a href="/catalog/j_spring_security_logout" > Logout </a><a href="/catalog/main" > Main</a>
		<table id="maintable" border="1" width="100%">
		<tr>
			<td>NAME</td>
			<td width="30%">DESCRIPTION</td>
			<td>HAVE SUBCATEGORY</td>
			<td>ACTIONS</td>
		</tr>
		<c:forEach items="${category}" var="cat">
		<tr>
			<td align="left">
				<input type="text" id="name${cat.category.idCategory}" value="${cat.category.name}">
			</td>
			<td align="left">
				<input type="text" id="description${cat.category.idCategory}" value="${cat.category.description}">
			</td>
			<td align="center">
				<c:choose>  
					<c:when test="${cat.haveSubCategory}">
					<% 
					Integer level = (Integer)request.getAttribute("level");
					if ( level < com.sav.common.controller.Consts.MAX_NESTING_LEVEL) { %>
						<a href="/catalog/editCategory?parent=${cat.category.idCategory}">YES</a>
					<%} else {%>
						YES
					<%}%>
					</c:when>  
					<c:otherwise> 
					<% 
					Integer level = (Integer)request.getAttribute("level");
					if ( level < com.sav.common.controller.Consts.MAX_NESTING_LEVEL) { %>
						<a href="/catalog/editCategory?parent=${cat.category.idCategory}">NO</a>
					<%} else {%>
						NO
					<%}%> 
                	
					</c:otherwise>  
				</c:choose>  
			</td>
			<td align="center">
				<input 
					type="button" 
					id="up${cat.category.idCategory}" 
					onClick="javascript:upCategory(${cat.category.idCategory});" 
					value="Up">
				<input 
					type="button" 
					id="down${cat.category.idCategory}" 
					onClick="javascript:downCategory(${cat.category.idCategory});" 
					value="Down">
				<input 
					type="button" 
					id="save${cat.category.idCategory}" 
					onClick="javascript:saveCategory(${cat.category.idCategory});" 
					value="Save">
				<input 
					type="button"  
					id="delete${cat.category.idCategory}" 
					onClick="javascript:deleteCategory(${cat.category.idCategory});" 
					value="Delete">	
			</td>
		</tr>
		<script type="text/javascript">
			arr[arr.length] = ${cat.category.idCategory};
		</script>
		</c:forEach>
		</table>
	
		<br><br>
		<table>
		<tr>
			<td>NAME</td>
			<td>DESCRIPTION</td>
			<td></td>
		</tr>
		<tr>
			<td style="vertical-align:top">
				<input type="text" id="addname" value="">
			</td>
			<td style="vertical-align:top">
				<input type="text" id="adddescription" value="">
			</td>
			<td style="vertical-align:top">
				<a href="javascript:add(${idParent})" class="btn btn-inverse" ><i class="icon-white icon-plus" ></i> Add</a>
			</td>
		</tr>
		</table>
		<br>
		<center>
			<a href="javascript:saveChanges()" class="btn btn-inverse" >
				<i class="icon-white icon-ok" ></i> Save all changes to database
			</a>
		</center>
		<br>
		<br>
		<br>
		</div>
	
	</div>
	
	<jsp:include page="footer.jsp"></jsp:include>



	<script type="text/javascript">
		function deleteCategory(idCategory) {
			if (confirm("really?"))
				jq(function() {
					jq.post(
						"/catalog/deleteCategory",
						{id:  idCategory},
						function(){
							alert("deleted");
							var nameCell = jq("#name" + idCategory);
							nameCell.parent().parent().remove();
						});
				});
		}
		
		function saveCategory(idCategory) {
			var nameCategory = jq("#name" + idCategory).val();
			var descriptionCategory = jq("#description" + idCategory).val();
			jq(function() {
				jq.post(
					"/catalog/changeCategory",
					{ 
						id:  idCategory,
						name: nameCategory,
						description: descriptionCategory},
					function(){
						alert("Saved");
					});
			});
		}
		
		function saveChanges() {
			jq(function() {
				jq.post(
					"/catalog/saveChanges",
					{ },
					function(){
						alert("Saved");
					});
			});
		}
		
		
		function downCategory(id) {
		
			var index = getIndexById(id);
			if (index != arr.length -1) {
				swap(index, index+1);
			}
		}
	
		function upCategory(id) {
			var index = getIndexById(id);
			if (index != 0) {
				swap(index, index-1);
			}
		}
	
		function swap(ind1, ind2) {
			
			jq(function() {
				jq.post(
					"/catalog/swapCategory",
					{ 
						id1: arr[ind1],
						id2: arr[ind2]},
					function(addedId){
						//alert("swap");
					});
			});
			
			var row1 = jq("#up" + arr[ind1]).parent().parent();
			var row2 = jq("#up" + arr[ind2]).parent().parent();
			
			var str = row1.html();
			row1.html(row2.html());
			row2.html(str);
			
			var tmp = arr[ind1];
			arr[ind1] = arr[ind2];
			arr[ind2] = tmp;
		}
	
		function getIndexById(id) {
			for (var i = 0; i < arr.length; ++i)
				if (arr[i] == id) return i;
		}
		
		
		
		function add(idParentCategory) {

			var nameCategory = jq("#addname").val();
			var descriptionCategory = jq("#adddescription").val();
			jq(function() {
				jq.post(
					"/catalog/addCategory",
					{ 
						name: nameCategory,
						description: descriptionCategory,
						idParent: idParentCategory},
					function(addedId){
						alert("added");
						addRow(addedId, nameCategory, descriptionCategory);
					});
			});
		}
		
		
		function addRow(id, name, description) {
			
			str = '<tr>';
			str += '<td align="left">';
				str += '<input type="text" id="name' + id + '" value="' + name + '">';
			str += '</td>';
			str += '<td align="left">';
				str += '<input type="text" id="description' + id +'" value="' + description + '">';
			str += '</td>';
			str += '<td align="center">';
			if (level < MAX_NESTING_LEVEL)
				str += '<a href="/catalog/editCategory?parent=' + id + '">NO</a> '; 
				else
					str += 'NO';
			
			str += '</td>';
			str += '<td align="center">';
			str += '<input ';
				str += 'type="button" ';
				str += 'id="up' + id + '" ';
				str += 'onClick="javascript:upCategory(' + id + ');" ';
				str += 'value="Up">';
			str += '<input ';
				str += 'type="button" ';
				str += 'id="down' + id + '" ';
				str += 'onClick="javascript:downCategory(' + id + ');" ';
				str += 'value="Down">';
			str += '<input ';
				str += 'type="button" ';
				str += 'id="save' + id +'" ';
				str += 'onClick="javascript:saveCategory(' + id + ');" ';
				str += 'value="Save">';
			str += '<input ';
				str += 'type="button" ';
				str += 'id="delete' + id + '" ';
				str += 'onClick="javascript:deleteCategory(' + id + ');" ';
				str += 'value="Delete">	';
			str += '</td>';
		str += '</tr>';
		jq("#maintable").append(str);		
	}
	
	</script>

</body>
</html>